<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒/框模型</title>
		<style>
			div{
				/* div 空间 特点：有宽没高  设置宽高 */
				width:200px;
				height: 200px;
				border: 1px solid red;
				/* 什么是盒/框模型
				 1.任何元素存在于盒模型中
				 2.盒模型包括什么
				 外边距+边框+内边距+内容
				 3.外边距属性？margin属性
				 边框以外外边距使用方式与border类似【微调：推】
				 语法：margin：属性值：为1个值，顺时针，代表方向：上右下左
				                      为2个值，顺时针，代表方向：上下右左
									  常用自使用居中:   0 auto/auto
									为3个值，顺时针，代表方向：上右左下
									为4个值，代表方向：上右下左
				3.1外边距-方向属性
				   margin-left:数值px;x方向微调
				   margin-right:数值px;
				   margin-top:数值px;y方向微调
				   margin-bottom:数值px;
				   4.内边距padding属性,方向与margin方向用法一致
				   边框与内容之间的距离 使用方式与margin类似【精灵图：撑】
				   为1个值，顺时针，代表方向：上右下左
				 为2个值，顺时针，代表方向：上下右左
				   	为3个值，顺时针，代表方向：上右左下
				   	为4个值，代表方向：上右下左
				 */
				padding: 50px 100px;
				padding: 10px 20px 30px;
				margin: 100px;
				margin:100px 200px;
				margin: 100px 200px 300px;
				margin: 100px 200px 300px 400px;
				margin-left:150px;
				/*元素自适应居中*/
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>